<template>
  <div>
    <van-tabbar
      v-model="activeTab"
      :safe-area-inset-bottom="true"
      @change="changeActive"
      active-color="#F6B622"
      fixed
      :z-index="9999"
    >
      <van-tabbar-item to="/home">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icons.md1 : icons.md" />
      </van-tabbar-item>
      <!-- <van-tabbar-item to="/contact">
        <span>联系我们</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icons.yj1 : icons.yj" />
      </van-tabbar-item> -->
      <van-tabbar-item to="/want">
        <span>我想租车</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icons.yg1 : icons.yg" />
      </van-tabbar-item>
      <van-tabbar-item to="/about">
        <span>关于爱玖</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icons.wd1 : icons.wd" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
import { CarMixin } from '../util/mixin.js';
export default {
  mixins: [CarMixin],
  data() {
    return {
      icons: {
        md: require('../assets/img/home0.png'),
        md1: require('../assets/img/home1.png'),
        yj: require('../assets/img/contact0.png'),
        yj1: require('../assets/img/contact1.png'),
        yg: require('../assets/img/rent0.png'),
        yg1: require('../assets/img/rent1.png'),
        wd: require('../assets/img/about0.png'),
        wd1: require('../assets/img/about1.png'),
      },
    };
  },
  created(){
    this.setTabbarActive(0)
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  methods: {
    changeActive(active) {
      this.setTabbarActive(active);
    },
  },
  computed: {
    activeTab: {
      get() {
        return this.$store.getters.activeStatus;
      },
      set(val) {},
    },
  },
};
</script>

<style scoped>
.van-tabbar {
  background-color: #303030;
}
</style>
